<template>
  <van-nav-bar left-arrow fixed title="商品详情" @click-left="onBack">
    <template #right>
      <van-icon name="ellipsis" />
    </template>
  </van-nav-bar>

  <div class="clear"></div>
  <div class="h50"></div>
  <div class="clear"></div>
  <div class="aui-m-slider">
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="(thumb, index) in info.thumbs_cdn" :key="index">
        <img :src="thumb" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <div class="clear"></div>
  <div class="clear"></div>
  <div class="detailbox">
    <h4>{{ info.name }}</h4>
    <div class="price">
      <em>￥</em>{{ info.price }}
      <font>已售{{ info.product_num }}件</font>
    </div>
  </div>
  <div class="clear"></div>
  <div class="allkbox"></div>
  <div class="clear"></div>
  <div class="detailbox_2" v-html="info.content"></div>

  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
    <van-action-bar-icon
      icon="cart-o"
      text="购物车"
      :to="{ path: '/order/cart/index', query: { action: 'cart' } }"
    />
    <van-action-bar-icon
      :icon="status == true ? 'star' : 'star-o'"
      @click="onColle"
      text="收藏"
      color="#ff5000"
    />
    <van-action-bar-button type="warning" @click="onCart" text="加入购物车" />
    <van-action-bar-button type="danger" @click="onBuyNow" text="立即购买" />
  </van-action-bar>
</template>
<script>
import { showNotify, showConfirmDialog } from "vant";
export default {
  data() {
    return {
      info: {},
      proid: 0,
      LoginAuth: {},
      status: false,
      checkedArr: [],
    };
  },
  created() {
    this.proid = this.$route.query.proid;

    this.LoginAuth = this.$cookies.get("LoginAuth")
      ? this.$cookies.get("LoginAuth")
      : {};

    this.getProductInfo();
  },
  methods: {
    async getProductInfo() {
      let data = {
        proid: this.proid,
      };

      if (this.LoginAuth.id) {
        data.busid = this.LoginAuth.id;
      }

      let result = await this.$api.ProductInfo(data);

      if (result.code === 0) {
        showNotify({
          type: "warning",
          message: result.msg,
          duration: 1500,
          onClose: () => {
            this.$router.go(-1);
          },
        });
        return false;
      }

      this.info = result.data;

      this.status = result.data.CollStatus;
    },
    onBack() {
      this.$router.go(-1);
    },
    async onColle() {
      if (JSON.stringify(this.LoginAuth) === "{}") {
        showNotify({
          type: "warning",
          message: "请先登录",
          duration: 1500,
          onClose: () => {
            showConfirmDialog({
              title: "登录",
              message: "是否需要登录？",
            })
              .then(() => {
                this.$router.push({
                  path: "/business/base/login",
                  query: { action: "info" },
                });
              })
              .catch(() => {});
          },
        });

        return false;
      }

      let data = {
        busid: this.LoginAuth.id,
        proid: this.proid,
      };

      let result = await this.$api.ProductCollection(data);

      if (result.code === 1) {
        if (result.data.status) {
          this.status = true;
        } else {
          this.status = false;
        }

        showNotify({
          type: "success",
          message: result.msg,
          duration: 1500,
        });
      } else {
        showNotify({
          type: "warning",
          message: result.msg,
          duration: 1500,
          onClose: () => {
            if (result.data.action == "login") {
              this.$cookies.remove("LoginAuth");
              this.$router.push("/business/base/login");
            }
          },
        });
      }
    },
    async onCart() {
      // 判断是否没有登录
      if (JSON.stringify(this.LoginAuth) === "{}") {
        showNotify({
          type: "warning",
          message: "请先登录",
          duration: 1500,
          onClose: () => {
            showConfirmDialog({
              title: "登录",
              message: "是否需要登录？",
            })
              .then(() => {
                this.$router.push({
                  path: "/business/base/login",
                  query: { action: "info" },
                });
              })
              .catch(() => {});
          },
        });

        return false;
      }

      // 组装数据
      let data = {
        proid: this.proid,
        busid: this.LoginAuth.id,
      };

      let result = await this.$api.CartAdd(data);

      if (result.code === 1) {
        showNotify({
          type: "success",
          message: result.msg,
          duration: 1500,
        });

        return false;
      } else {
        showNotify({
          type: "warning",
          message: result.msg,
          duration: 1500,
        });
      }
    },
    onBuyNow() {
      // 把数组转成字符串
      // let cartids = this.checkedArr.join(",");
      // console.log(this.proid);

      // if (!cartids) {
      //   showNotify({
      //     type: "warning",
      //     message: "请选择结算的商品",
      //     duration: 1500,
      //   });

      //   return false;
      // }

      // console.log(this.proid);
      this.$router.push({
        path: "/order/cart/confirm",
        query: { proid: this.proid, total: this.info.price },
      });
    },
  },
};
</script>